<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Bar Seen</title>
<link href="icon.jpg" rel="shortcut icon" type="image/x-icon" />

	<style>
		body{
			background-color:#DAFF7F;
		}
		img.slider
		{
			position:absolute;
			left:25px;
			z-index:-2;
		}
		
		img.slider_ball
		{
			position:absolute;
			left:12px;
			z-index:0;
		}
	</style>
	
	<script type="text/javascript">
		document.onmousemove = mouseMove;
		
		var prevMouseX = 0;
		var prevMouseY = 0;
		var mouseX = 0;
		var mouseY = 0;
		
		var movingObject = null;
		
		function mouseMove(ev){
			ev = ev || window.event;
			
			prevMouseX = mouseX;
			prevMouseY = mouseY;
			mouseX = ev.pageX;
			mouseY = ev.pageY;
			var coord = "" + mouseX + ", " + mouseY;
			document.getElementById("out").value = coord;
			
			if(movingObject){
				document.getElementById("out").value = movingObject.src;
				var curSpace = movingObject.hspace;
				var dif = prevMouseX - mouseX;
				
				movingObject.hspace = curSpace - dif - 5;
			}
		}
		
		function mouseLock(id){
			movingObject = document.getElementById(id);
		}
		
		function mouseUnlock(id){
			alert("unlocked");
			movingObject = null;
		}
		
		function slideRight(id)
		{
			var sp = document.getElementById(id).hspace + 20;
			
			if(sp > 212)
				sp = 212;
			
			document.getElementById(id).hspace=sp;
		}
		
		function slideLeft(id)
		{
			var sp = document.getElementById(id).hspace - 20;
			document.getElementById(id).hspace=sp;
		}
		
		function centerClicked(){
			document.getElementById("center").src = "center_filled_selector.gif";
			document.getElementById("left").src = "left_selector.gif";
			document.getElementById("right").src = "right_selector.gif";
		}
		
		function rightClicked(){
			document.getElementById("center").src = "center_selector.gif";
			document.getElementById("left").src = "left_selector.gif";
			document.getElementById("right").src = "right_filled_selector.gif";
		}
		
		function leftClicked(){
			document.getElementById("center").src = "center_selector.gif";
			document.getElementById("left").src = "left_filled_selector.gif";
			document.getElementById("right").src = "right_selector.gif";
		}
	</script>
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>

<body>
<image src="icon.jpg" alt="Mr. Hopper" align="top"/>
BarHopperLive.com
<form action="">
	<input type="text" id="out" />
	<h2>Gangta Grillz Bar</h2>
	
	<div>
		<img src="man.gif" align="center" width="55" height="55">
		<img class="left_button" id="left" src="left_selector.gif" width="58" align="center" onclick="leftClicked()"/>
		<img class="left_button" id="center" src="center_selector.gif" width="57" align="center" onclick="centerClicked()"/>
		<img class="left_button" id="right" src="right_selector.gif" width="58" align="center" onclick="rightClicked()"/>
		<img src="man.gif" align="center" width="55" height="55">
	</div>
	
	<br/><br/>
	
	<label class="RatingLabel" for="price">Prices </label>
	<div id="price_slider">
		<div>
			<img class="slider" src="bar.png" width="200" height="25"/>
			<img class="slider_ball" id="price" src="green_ball.png" hspace="100">
		</div>
		<br/><br/>
		<input type="button" onclick="slideLeft('price')" value="Lower Prices" />
		<input type="button" onclick="slideRight('price')" value="Higher Prices" />
	<div>
	
	<br/><br/>
	<label class="RatingLabel" for="crowd">Crowd</label>
	<div id="crowd_slider">
		<div>
			<img class="slider" src="bar.png" width="200" height="25"/>
			<img class="slider_ball" id="crowd" src="green_ball.png" hspace="100">
		</div>
		<br/><br/>
		<input type="button" onclick="slideLeft('crowd')" value="Less people" />
		<input type="button" onclick="slideRight('crowd')" value="More people" />
	<div>
	
	<br/><br/>
	<input type="submit" value="Submit" />
</form>

<br/><br/>
<div id="app_notice">
	iPhone and Android app coming soon.
	<img src="app store.gif" height="25" width="25" align="middle"/>
	<img src="android market.gif" height="25" width="25" align="middle"/>
</div>
</body>

</html> 